Antes de iniciar esta integración, asegúrese de haber instalado y configurado nuestro Web SDK. Para instrucciones de configuración, consulte la documentación de Web SDK - Primeros pasos. Una vez completado, regrese aquí para continuar. De lo contrario, lo guiaremos por el proceso de instalación de Marketplace SDK, instanciar el SDK y le mostraremos algunos hooks para trabajar con nuestro marketplace.

​
Instalación de los paquetes de Marketplace SDK

Marketplace SDK es modular, lo que le permite instalar solo los paquetes necesarios. Para comenzar, instale el paquete principal @0xsequence/marketplace-sdk y otras dependencias necesarias. 
npm install @0xsequence/connect @0xsequence/checkout @0xsequence/wallet-widget @0xsequence/marketplace-sdk @0xsequence/design-system @0xsequence/network @0xsequence/indexer @0xsequence/metadata wagmi ethers@^6 viem 0xsequence @tanstack/react-query @tanstack/react-query-devtools @legendapp/state framer-motion pino-pretty
# or
pnpm add @0xsequence/connect @0xsequence/checkout @0xsequence/wallet-widget @0xsequence/marketplace-sdk @0xsequence/design-system @0xsequence/network @0xsequence/indexer @0xsequence/metadata wagmi ethers@^6 viem 0xsequence @tanstack/react-query @tanstack/react-query-devtools @legendapp/state framer-motion pino-pretty
# or
yarn add @0xsequence/connect @0xsequence/checkout @0xsequence/wallet-widget @0xsequence/marketplace-sdk @0xsequence/design-system @0xsequence/network @0xsequence/indexer @0xsequence/metadata wagmi ethers@^6 viem 0xsequence @tanstack/react-query @tanstack/react-query-devtools @legendapp/state framer-motion pino-pretty

​
Configurando su Dapp

Para utilizar el wrapper principal de marketplace-sdk e interactuar con su marketplace desde su aplicación, siga estos pasos:
1

Verifique si su Web SDK está correctamente integrado

Asegurarse de que su Web SDK esté correctamente integrado es fundamental antes de comenzar con Marketplace SDK. Para verificarlo, simplemente compruebe si puede iniciar y cerrar sesión correctamente.
2

Crear una configuración

A continuación, deberá crear una variable de configuración para Marketplace SDK. En este archivo, definiremos y gestionaremos los ajustes esenciales de configuración para nuestro Marketplace SDK, incluidas las variables de entorno. Este enfoque centralizado garantiza que los valores de configuración sean fácilmente accesibles y mantenibles.

​
config.ts

import type { SdkConfig } from '@0xsequence/marketplace-sdk';

const projectAccessKey = import.meta.env.VITE_PROJECT_ACCESS_KEY;
const projectId = import.meta.env.VITE_PROJECT_ID!;
const walletConnectId = import.meta.env.VITE_WALLET_CONNECT_ID;

export function getConfig() {
  const config = {
    projectId,
    projectAccessKey,
    walletConnectProjectId: walletConnectId
  } satisfies SdkConfig;

  return config;
}
3

Crear un SSR Client

A continuación, deberá crear un SSR Client para Marketplace SDK. Este SSR Client sirve como punto de entrada para inicializar el marketplace SDK en el servidor de Next.js, permitiendo una obtención eficiente de datos y configuración antes de renderizar la interfaz de usuario.

​
Entendiendo el SSR Client

El SSR Client le permite acceder a datos clave y configuraciones del marketplace, esenciales para inicializar correctamente el SDK del lado del servidor. Se puede obtener la siguiente información:Esta configuración asegura una integración fluida del marketplace SDK con el renderizado del lado del servidor, mejorando el rendimiento y la experiencia del usuario.

​
ssrClient.ts

// You can omit this step with VITE
4

Agregue los proveedores de Marketplace SDK junto con los proveedores de su Web SDK

Abra su archivo Providers.tsx, donde está configurado el Web SDK, e integre los proveedores de Marketplace SDK.
import {
  MarketplaceProvider,
  ModalProvider,
} from "@0xsequence/marketplace-sdk/react";
import { getConfig } from "./config";

const sdkConfig = getConfig();

// Into your React component:

return (
  /* Your other providers should be placed here (they should wrap MarketplaceProvider) */
  
  <MarketplaceProvider config={sdkConfig}>
    {children}
    <ModalProvider />
  </MarketplaceProvider>

  /* Your other providers should close here */
);
5

Listo

¡Felicidades! Ahora está listo para explorar los hooks disponibles en nuestro Marketplace SDK. Consulte la documentación de hooks de Marketplace SDK para obtener más información.